<template>
	<view>
		<view class="upload-img">
			<view>
				<view class="ck-img" v-for="(item, index) in imgList" :key="index" @click="perviewImg(index)">
					<image :src="item" v-if="item"></image>
					<view class="ck-icon-close" @click.stop="handRemove(index)">
						<view class="icon guanbi2"></view>
					</view>
				</view>
				<view v-if="imgList.length < selectNum" class="ck-img-add" @click="chooseImage">
					<text class="icon tianjia"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import qiniuUploader from './qiniuUploader.js';
	export default {
		name: 'ck-upload-img',
		components: {},
		data() {
			return {
				token : this.$getConfig('uptoken'),
				imgList: [],
				imgKeyList: []
			};
		},
		props: {
			initImgList: { //页图初始化图片回显
				type: [Array,String],
				default () {
					return []
				}
			},
			selectNum: {
				//选择图片的数量
				type: Number,
				default: 1,
			}
		},
		watch:{
			initImgList(){
				this.initImg()
			}
		},
		created() {
			this.initImg();
		},
		methods: {
			initImg() {
				//传入图片，回显
				if(Array.isArray(this.initImgList)){
					this.imgList = this.initImgList
				}else{
					this.imgList = [this.initImgList]
				}
				this.imgList.forEach(v=>{
					this.imgKeyList.push(this.getUrlKey(v))
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: this.selectNum, //默认9
					success: (chooseImageRes) => {
						for (var i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
							let file = chooseImageRes.tempFilePaths[i];
							let index = file.lastIndexOf('/');
							let len = file.length
							let name = file.substring(index + 1, len)
							// 交给七牛上传
							let newLen = this.selectNum-this.imgList.length
							if (newLen > 0) {
								qiniuUploader.upload(file, (res) => {
									let inLen = this.selectNum-this.imgList.length
									if (inLen > 0) {
										this.imgList.push(file);
										this.imgKeyList.push(res.key)
									}
									this.$emit('returnImgUrl', this.imgKeyList) //将图片回传父页面
								}, (error) => {
									console.log('error: ' + error);
								}, {
									region: 'ECN',
									key: name,
									uptoken: this.token, // 由其他程序生成七牛 uptoken
								}, (res) => {
									console.log('上传进度', res.progress)
								}, () => {
									// 取消上传
								}, () => {
									// `before` 上传前执行的操作
								}, (err) => {
									// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
								});
							}
						}
					}
				})
			},
			perviewImg(index) {
				let urls = [];
				if (index != -1) {
					urls[0] = this.imgList[index];
				} else {
					urls = this.imgList;
				}
				uni.previewImage({
					urls: urls
				});
			},
			handRemove(index) {
				let il = [],
					ibl = [];
				for (var i = 0; i < this.imgList.length; i++) {
					if (i != index) {
						il.push(this.imgList[i]);
						ibl.push(this.imgKeyList[i]);
					}
				}
				this.imgList = il;
				this.imgKeyList = ibl;
			},
			getUrlKey(file) {
				let index = file.lastIndexOf('/');
				let len = file.length
				let name = file.substring(index + 1, len)
				return name;
			}
		}
	}
</script>

<style>
	.upload-img {
		margin: 5upx 20upx;
	}

	.ck-img {
		float: left;
		margin-right: 10upx;
		border-radius: 20upx;
		height: 115upx;
	}

	.ck-img>image {
		border-radius: 20upx;
	}

	.ck-img-add {
		float: left;
		margin-right: 10upx;
		height: 100upx;
		width: 100upx;
		background-color: #C8C7CC;
		text-align: center;
		font-size: 90upx;
		border-radius: 20upx;
		margin-bottom: 10upx;
		display: flex;
		justify-content:center;
		align-items: center;
	}

	.tianjia{
		font-size: 90rpx;
		color: #9f9ea2;
	}
	.ck-img>image {
		height: 100upx;
		width: 100upx;
	}

	.ck-icon-close {
		position: relative;
		right: -75upx;
		top: -120upx;
		color: #DC2929;
	}

	.ck-icon-close>view {
		font-size: 40upx;
	}
</style>
